<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/table/select.html' as select />
<#import '${ctx}/biz/chart/element/chart_detail2.html' as cd/>
<#import '${ctx}/biz/chart/element/metric-select2.html' as metric />
<@cd.detail>
<div class="layui-row">
    <form class="layui-form">
    	<input id="chart_type" value="pie2" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">选择数据源</label>
            <div class="layui-input-block"><@select.table name="dsId"
                show="dsName" url="${ctx}/biz/c/p/ds-select-table" />
            </div>
        </div>
        <label>指标设置</label>
        <hr/>
        <@metric.atom url="${ctx}/biz/chart/data"/>
    </form>
</div>
</@cd.detail>
<script type="text/javascript">
	var chartIndex = 0;
	var fieldMap = {};
	layui.use(['layer','appJs'],function(){
		var $ = layui.$
		,layer = layui.layer
		,app = layui.appJs;


		window.handleResponse = function(chart,data) {
			let fl = data.fieldList;
			let p = "";
			for(let f in fl){
				if(p == "") {
					p = fl[f].id;
				}else {
					p = p + "*" + fl[f].id;
				}
			}
			let v = chart;
			v.data(data.listData);
			v.coordinate('theta', {
				  radius: 0.75,
				  innerRadius: 0.6,
				});
			v.tooltip({
				  showTitle: false,
				  showMarkers: false,
				  itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
				});
			v
			  .interval()
			  .adjust('stack')
			  .position("__doc")
			  .color(p+'');
			v.interaction('element-active');
			console.log(p);
		}

	});
</script>